<template>
	<view class="status_bar">
		<!-- 这里是状态栏 -->
	</view>
	<view class="navbar-wrap">
		<view class="left-icon">
			<image v-show="showLeft" class="icon" src="/static/images/back.png"></image>
		</view>
		<view class="title"> {{ title }}</view>
		<view class="left-icon">
			<slot name="rightIcon"></slot>
		</view>
	</view>
</template>
<script setup lang="ts">
defineProps({
	showLeft: {
		type: Boolean,
		default: false,
	},
	title: {
		type: String,
		default: 'title',
	},
});
</script>
<style lang="scss" scoped>
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}
.navbar-wrap {
	width: 100%;
  height: 68rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10rpx 10rpx;
	color: #ffffff;
	.left-icon {
		width: 48rpx;
		height: 48rpx;
		.icon {
			width: 48rpx;
			height: 48rpx;
		}
	}
	.left-icon {
		width: 48rpx;
		height: 48rpx;
	}
}
</style>
